import styles from "./WiFiHelper.less";
import React from "react";
import { createForm } from "rc-form";
import Container from "../components/Base/Container";
import { List, Tabs, WhiteSpace, Badge, Picker, Switch } from "antd-mobile";
import ReactEcharts from "../components/Base/Echarts";
import classnames from "classnames";

const TabPane = Tabs.TabPane;
function callback(key) {
  console.log("onChange", key);
}
function handleTabClick(key) {
  console.log("onTabClick", key);
}

const shopList = [
  {
    label: "shop-1",
    value: "shop-1"
  },
  {
    label: "shop-2",
    value: "shop-2"
  }
];

class WiFiHelper extends React.Component {
  render() {
    return (
      <Container title="WIFI 助手" className={styles["tt"]}>
        <Tabs defaultActiveKey="1">
          <TabPane tab="客流分析" key="1">
            <P1w />
          </TabPane>
          <TabPane tab="进店分析" key="2">
            <P2w />
          </TabPane>
          <TabPane tab="转化效果" key="3">
            <P2w />
          </TabPane>
        </Tabs>
      </Container>
    );
  }
}

class P1 extends React.Component {
  render() {
    const { getFieldProps } = this.props.form;
    return (
      <div>
        <div className={styles["wifi-shop-warpper"]}>
          <Picker
            data={shopList}
            cols={1}
            {...getFieldProps("district3")}
            className="forss"
          >
            <List.Item arrow="horizontal">门店：</List.Item>
          </Picker>
        </div>

        <div className={styles["switch-warpper"]}>
          <button
            className={classnames({
              [styles["date-switch"]]: true,
              [styles["date-switch-active"]]: true
            })}
          >
            7天
          </button>
          <button className={styles["date-switch"]}>30天</button>
        </div>

        <div>
          1、客流趋势
          {this.getOption3()}
        </div>

        <div>
          2、进店率
          {this.getOption3()}
        </div>
      </div>
    );
  }

  getOption3 = () => {
    let d1 = [1, 10, 15, 15, 20],
      d3 = [2, 20, 25, 30, 15],
      d4 = [3, 5, 9, 10, 33];
    // let d1 = [],
    //   d3 = [],
    //   d4 = [];
    // data.forEach(d => {
    //   d1.push(d.md);
    //   d4.push(d.avg_price);
    //   d3.push(d.sale_count);
    // });
    // d1 = d1.reverse();
    // d3 = d3.reverse();
    // d4 = d4.reverse();
    const option = {
      title: {
        // text: '',
      },
      color: ["#6aa7da", "#ffc000"],
      tooltip: {
        trigger: "axis",
        formatter: "客单价： {c1}元 <br/> 客单量：{c0}单"
      },
      grid: {
        containLabel: true,
        left: 10,
        right: 10,
        top: 40,
        bottom: 40
      },
      legend: {
        data: ["贡献", "客单价", "客单量"]
      },
      xAxis: [
        {
          type: "category",
          axisTick: {
            alignWithLabel: true
          },
          data: d1,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          min: 0,
          position: "left",
          // splitLine: {show: false},
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            // margin:0,
            // showMinLabel:false
          }
        }
      ],
      series: [
        {
          name: "客单量",
          type: "line",
          label: {
            normal: {
              show: false
            }
          },
          lineStyle: {
            normal: {
              width: 1.5

              /*shadowColor: 'rgba(0,0,0,0.4)',
              shadowBlur: 5,
              shadowOffsetY: 5,*/
            }
          },
          data: d3
        },
        {
          name: "客单价",
          type: "line",
          label: {
            normal: {
              show: false
            }
          },
          lineStyle: {
            normal: {
              width: 1.5
              /*shadowColor: 'rgba(0,0,0,0.4)',
              shadowBlur: 5,
              shadowOffsetY: 5,*/
            }
          },
          areaStyle: {
            normal: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(228,240,250)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(228,240,250,0.1)" // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              }
            }
          },
          data: d4
        }
      ]
    };

    return <ReactEcharts option={option} />;
  };
}

class P2 extends React.Component {
  render() {
    return <div>{this.getCustomerGroup()}</div>;
  }

  //客户构成
  getCustomerGroup = () => {
    const currentSize = {
      A: 50,
      B: 60,
      C: 79,
      D: 20
    };
    const totalSize =
      currentSize.A + currentSize.B + currentSize.C + currentSize.D;
    const data = [
      {
        value: _.round((currentSize.A / totalSize) * 100, 2),
        name: "核心会员"
      },
      {
        value: _.round((currentSize.B / totalSize) * 100, 2),
        name: "忠诚会员"
      },
      {
        value: _.round((currentSize.C / totalSize) * 100, 2),
        name: "普通会员"
      },
      {
        value:
          100 -
          (_.round((currentSize.A / totalSize) * 100, 2) +
            _.round((currentSize.B / totalSize) * 100, 2) +
            _.round((currentSize.C / totalSize) * 100, 2)),
        name: "低效会员"
      }
    ];
    const option = {
      color: ["#ffc000", "#8abe60", "#6aa7da", "#d9d9d9"],
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c}%"
      },
      legend: {},
      series: [
        {
          name: "会员",
          type: "pie",
          radius: "50%",
          center: ["50%", "60%"],
          data,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          },
          label: {
            normal: {
              // position: 'inside',
              formatter: "{b} \n {d}%"
            }
          }
        }
      ]
    };

    let d1 = [1, 10, 15, 15, 20],
      d3 = [2, 20, 25, 30, 15],
      d4 = [3, 5, 9, 10, 33];
    // let d1 = [],
    //   d3 = [],
    //   d4 = [];
    // data.forEach(d => {
    //   d1.push(d.md);
    //   d4.push(d.avg_price);
    //   d3.push(d.sale_count);
    // });
    // d1 = d1.reverse();
    // d3 = d3.reverse();
    // d4 = d4.reverse();
    const option1 = {
      title: {
        // text: '',
      },
      color: ["#6aa7da", "#ffc000"],
      tooltip: {
        trigger: "axis",
        formatter: "客单价： {c1}元 <br/> 客单量：{c0}单"
      },
      grid: {
        containLabel: true,
        left: 10,
        right: 10,
        top: 40,
        bottom: 40
      },
      legend: {
        data: ["贡献", "客单价", "客单量"]
      },
      xAxis: [
        {
          type: "category",
          axisTick: {
            alignWithLabel: true
          },
          data: d1,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          min: 0,
          position: "left",
          // splitLine: {show: false},
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            // margin:0,
            // showMinLabel:false
          }
        }
      ],
      series: [
        {
          name: "客单量",
          type: "line",
          label: {
            normal: {
              show: false
            }
          },
          lineStyle: {
            normal: {
              width: 1.5

              /*shadowColor: 'rgba(0,0,0,0.4)',
            shadowBlur: 5,
            shadowOffsetY: 5,*/
            }
          },
          data: d3
        },
        {
          name: "客单价",
          type: "line",
          label: {
            normal: {
              show: false
            }
          },
          lineStyle: {
            normal: {
              width: 1.5
              /*shadowColor: 'rgba(0,0,0,0.4)',
            shadowBlur: 5,
            shadowOffsetY: 5,*/
            }
          },
          areaStyle: {
            normal: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgb(228,240,250)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(228,240,250,0.1)" // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              }
            }
          },
          data: d4
        }
      ]
    };
    const { getFieldProps } = this.props.form;

    return (
      <div>
        <div className={styles["wifi-shop-warpper"]}>
          <Picker
            data={shopList}
            cols={1}
            {...getFieldProps("district3")}
            className="forss"
          >
            <List.Item arrow="horizontal">门店：</List.Item>
          </Picker>
        </div>

        <div className={styles["switch-warpper"]}>
          <button
            className={classnames({
              [styles["date-switch"]]: true,
              [styles["date-switch-active"]]: true
            })}
          >
            7天
          </button>
          <button className={styles["date-switch"]}>30天</button>
        </div>

        <div>
          1、客户构成
          <ReactEcharts option={option} className="react_for_echarts" />
        </div>

        <div>
          2、停留时间
          <ReactEcharts option={option1} className="react_for_echarts" />
        </div>
      </div>
    );
  };
}

const P2w = createForm()(P2);
const P1w = createForm()(P1);
export default createForm()(WiFiHelper);
